<template  name='workbench'>
  <view class="flex-col page">
    <view class="flex-col group">
      <view class="flex-col section_1">
        <text class="text">咨询师工作平台</text>
        <view class="banners">
            <image :src="banner1" mode=""></image>
        </view>
        <view class="inform">
        	<view class="title">
        		系统<view> <text>公告</text></view>
        	</view>
        	<swiper vertical autoplay circular interval="4000" display-multiple-items='1'
        		style="width: 350rpx;height: 3vh;">
        		<swiper-item v-for="(item, index) in question" :key="index" style="display: flex;align-items: center;">
        			<view class="swi"> {{ item.noticeTitle }} </view>  <!-- <text class="tx3">购买了..</text> -->
        		</swiper-item>
        	</swiper>
            <!-- <view class="mode">
                更多 <u-icon name="arrow-right" size='10'></u-icon>
            </view> -->
        </view>
      </view>
     
      <view class="flex-col group_6">
        <view class="flex-col section_5">
            <view class="" style="display: flex;justify-content: space-between;">
                <view class="flex-row group_7">
                <view class="" style="width: 10rpx;height: 30rpx;background-image:linear-gradient(#2691E6,#fff) ;">
                    
                </view>
                  <text class="text_8">我的代办</text>
                </view>
                <view class="justify-evenly section_6" @click="onClickView_17">
                  <text class="text_9">进入咨询室</text>
                  <image
                    src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/62ac1d455a7e3f03100b6468/62b188edd029820011534ee0/16558224023236309429.png"
                    class="image_10"
                  />
                </view>
            </view>

          <view class="flex-row equal-division_2">
            <view class="flex-col equal-division-item_2">
              <view class="justify-center group_9">
                <text class="text_10">{{commission.toService?commission.toService:'0'}}</text>
                <text class="text_12">位</text>
              </view>
              <text class="text_14">待服务</text>
            </view>
            <view class="flex-col equal-division-item_2">
              <view class="justify-center group_9">
                <text class="text_10">{{commission.newMessage?commission.newMessage:'0'}}</text>
                <text class="text_12">条</text>
              </view>
              <text class="text_14">新消息</text>
            </view>
           <view class="flex-col equal-division-item_2">
              <view class="justify-center group_9">
                <text class="text_10">{{commission.monthCustomer?commission.monthCustomer:'0'}}</text>
                <text class="text_12">人</text>
              </view>
              <text class="text_14">包月客户</text>
            </view>
          </view>
        </view>
        <view class="" style="margin-top: 30rpx;" @click="ExpertsLn">
            <image style="width: 100%;" src="https://ceshi2.cnshangji.cn/wanshan.png" mode="widthFix"></image>
        </view>
        <view class="flex-col section_8">
            <view class="" style="display: flex;justify-content: space-between;align-items: center;">
                <view class="flex-row group_17">
                 <view class="" style="width: 10rpx;height: 30rpx;background-image:linear-gradient(#2691E6,#fff) ;">
                     
                 </view>
                  <text class="text_27">服务消息</text>
                </view>
                <view class="" style="color: #999;font-size: 22rpx;display: flex;align-items: center;" @click="modes">
                    更多 <u-icon name="arrow-right" color="#999" size="12"></u-icon>
                </view>
            </view>
         
          <view class="" style="text-align: center;margin-top: 50rpx;" v-if="list.length==0">
              <image src="../../static/dingdan.png" mode="scaleToFill" style="margin-top: 50rpx;width: 100rpx;height: 110rpx;"></image>
              <view class="" style="color: #999;font-size: 28rpx;margin-top: 20rpx;">
                  暂无数据
              </view>
          </view>
          <view class="flex-col section_9" v-for="(item,index) in list" :key="index">
            <view class="justify-between">
              <view class="flex-row">
                <image
                  :src="item.wx_avatar"
                  class="image_17"
                />
                <text class="text_28">{{item.user_name ? item.user_name : '用户已注销'}}</text>
              </view>
              <view class="flex-col items-center text-wrapper" @click="news(item.another_id,item.wx_avatar,item.order_id)"><text class="text_29">点击回复</text></view>
            </view>
            <view class="flex-row group_20">
              <view class="flex-col items-center text-wrapper_1" v-if="item.order_id == null"><text class="text_30">私聊</text></view>
             <view class="flex-col items-center text-wrapper_2" v-else><text class="text_30">文字</text></view>
              <text class="text_31">{{item.content}}</text>
            </view>
            <text class="text_32">{{item.create_time}}</text>
          </view>
        </view>


      </view>
    </view>
    </view>
</template>

<script>
import {
		getHomeAnnouncement,
        getindexbanner,
		serviceMessage
	} from '../../api/index.js'
    import {
            gettoDo
    	} from '../../api/counselor.js'
  export default {
      name: 'workbench',
      props: {
      	cur: String,
      },
    components: {},
    data() {
      return {
          banner1:'',
        question: [],
        pageInfo: {
          pageIndex: 1,
          pageSize: 10
        },
          commission:
              {
              }
          ,
          list:[],
      };
    },
    created(){
        let that=this
        //公告
      getHomeAnnouncement(3).then(res=>{
          console.log(res.rows);
          that.question=res.rows
      })
      //banner
      getindexbanner(8).then(res => {
      	console.log(res.rows);
        that.banner1=res.rows[0].url
      })
      //我的代办
      gettoDo().then(res=>{
          console.log(res);
          that.commission=res.data
      })
	  //服务消息
	  serviceMessage().then(res=>{
		  this.list = res.data
	  })
    },
    mounted() {
      uni.$on('Bottom',()=>{
        this.pageInfo.pageIndex += 1
        setTimeout(() => {
          this.getExpertList();
        }, 500)
      })
    },
    methods: {
		news(item,wx_avatar,orderid) {
			console.log(orderid)
			
			uni.navigateTo({
				url: '/pages/workbench/news?id=' + item + "&ava=" + wx_avatar + "&status=2&orderid="+orderid
			})
		},
        modes(){
            uni.navigateTo({
                url:'/subPackages/pages/user2/informationlist'
            })
        },
        ExpertsLn(){
          uni.navigateTo({
              url:'/pages/User/individualResume?id=' + this.$store.state.userInfo.wxInfo.uid
          })  
        },
      toReply() {
        uni.navigateTo({ url: "/pages/workbench/news" })
      },
        onClickView_15(){
          uni.navigateTo({ url: '/pages/huaban_1_kaobei_72/huaban_1_kaobei_72' })
        },
      onClickView_17() {
         uni.navigateTo({ url: '/subPackages/pages/user2/consultingRoom' });
      },
      onClickView_29() {
         this.$emit('resurlxx','xxlb');
      }
    },
  };
</script>

<style scoped lang="scss">
    .inform{
        border-radius: 15rpx;
        padding: 20rpx;
        width: 92vw;
        margin: 20rpx auto;
        background-color: #fff;
        display: flex;
        align-items: center;
        .title{
            padding-right: 15rpx;
            margin-right: 15rpx;
            border-right: 1rpx solid #eee;
            color: #4199FF;
            font-size: 28rpx;
            font-weight: bold;
            display: flex;
            view{
                margin-left: 12rpx;
                 transform:skewX(-20deg);
                 border-radius: 6rpx;
                 padding: 0 4rpx;
                 background-color: #4199FF;
                 box-shadow: 10rpx 0 10rpx #abd3f5;
                 text{
                     display: block;
                    transform: skewX(20deg);
                    color: #fff;
                 }
            }
        }
        .swi{
            color: #666666;
            font-size: 24rpx;
            width: 350rpx;
            text-overflow: ellipsis;
                        overflow: hidden;
                        white-space: nowrap;
            text{
               color: #4199FF;
            }
        }
        .mode{
            display: flex;
            align-items: center;
            font-size: 20rpx;
            color: #999;
        }
    }
  button::after {
    border: initial;
  }
  .contactButton {
    background: white;
    height: auto;
    padding: 5px;
	margin-left: 80rpx;
  }
  .image_18 {
    width: 1.69rem;
    height: 1.69rem;
  }
  .equal-division-item {
    flex: 1 1 10.47rem;
    padding: 0.45rem 0.67rem 0.45rem 1rem;
  }
  .horiz-divider {
    margin: 0.45rem 0 0.39rem;
    flex-shrink: 0;
    background-color: #ffffff6b;
    width: 0.031rem;
    height: 1.25rem;
  }
  .equal-division-item_1 {
    flex: 1 1 10.47rem;
    padding: 0.45rem 0.7rem 0.45rem 1.02rem;
  }
  .image_8 {
    width: 0.31rem;
    height: 0.94rem;
  }
  .equal-division-item_2 {
    flex: 1 1 7.19rem;
    padding: 0.31rem 0.53rem;
  }
  .equal-division-item_3 {
    margin-left: 0.28rem;
    flex: 1 1 5.19rem;
    padding: 0.39rem 0.22rem;
  }
  .image_1 {
    border-radius: 0.59rem;
    width: 2.5rem;
    height: 1.19rem;
  }
  .group_9 {
    padding: 0 0.19rem;
  }
  .text_10 {
    color: #2691E6;
    font-size: 1.06rem;
    font-family: SourceHanSansCN;
    font-weight: 500;
    line-height: 0.78rem;
  }
  .text_2 {
    margin: 0.2rem 0;
    color: #ffffff;
    font-size: 0.81rem;
    font-family: SourceHanSansCN;
    line-height: 0.78rem;
  }
  .image_2 {
    margin-left: 0.34rem;
  }
  .text_5 {
    margin: 0.19rem 0 0.22rem;
    color: #ffffff;
    font-size: 0.81rem;
    font-family: SourceHanSansCN;
    line-height: 0.78rem;
  }
  .image_5 {
    margin-left: 0.33rem;
  }
  .text_14 {
    margin-top: 0.56rem;
    align-self: center;
    color: #63667d;
    font-size: 0.81rem;
    font-family: SourceHanSansCN;
    line-height: 0.75rem;
  }
  .text_12 {
    margin-top: 0.078rem;
    color: #999999;
    font-size: 0.75rem;
    font-family: SourceHanSansCN;
    line-height: 0.72rem;
  }
  .page {
    background-color: #f5f5f5;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
  }
  .group {
    flex: 1 1 auto;
    overflow-y: auto;
  }
  .tab-bar {
    padding: 0.22rem 1.84rem 0.38rem;
    background-color: #ffffff;
    box-shadow: 0px 0.13rem 2.13rem #7d7d7d3d;
  }
  .section_1 {
    padding: 2rem 0.81rem 2.81rem;
    background-image: linear-gradient(#339EF5,#F5F5F5);
  }
  .group_6 {
    margin-top: -1.88rem;
    padding: 0 0.84rem;

  }
  .group_21 {
    width: 2.5rem;
    height: 2.47rem;
  }
  .group_22 {
    height: 2.44rem;
  }
  .group_23 {
    margin-top: 0.078rem;
    height: 2.39rem;
  }
  .group_24 {
    margin-top: 0.094rem;
    height: 2.38rem;
  }
  .text {
      padding: 20rpx 0;
    align-self: center;
    color: #fff;
    font-weight: bold;
    font-size: 1.06rem;
    font-family: SourceHanSansCN;
    line-height: 1rem;
  }
  .section_5 {
    margin-right: 0.19rem;
    padding: 0.84rem 0 1.31rem;
    border-radius: 0.47rem;
    background-image: linear-gradient(#C2E0F6,#fff);

  }
  .section_7 {
    margin: 0.94rem 0.094rem 0;
    padding: 0.88rem 0 1.22rem;
    background-color: #ffffff;
    border-radius: 0.47rem;
  }
  .section_8 {
    margin: 0.94rem 0.094rem 0;
    padding: 0 0.78rem 0.88rem;
    background-color: #ffffff;
    border-radius: 0.47rem 0.47rem 0 0;
  }
  .text_33 {
    margin-top: 0.19rem;
    color: #6d79fe;
    font-size: 0.63rem;
    font-family: SourceHanSansCN;
    line-height: 0.59rem;
  }
  .text_34 {
    margin-top: 0.16rem;
    color: #9dabc0;
    font-size: 0.63rem;
    font-family: SourceHanSansCN;
    line-height: 0.59rem;
  }
  .text_35 {
    margin-top: 0.11rem;
    color: #9dabc0;
    font-size: 0.63rem;
    font-family: SourceHanSansCN;
    line-height: 0.59rem;
  }
  .text_36 {
    margin-top: 0.094rem;
    color: #9dabc0;
    font-size: 0.63rem;
    font-family: SourceHanSansCN;
    line-height: 0.59rem;
  }
  .equal-division {
    margin-top: 0.8rem;
  }
  .group_7 {
    padding: 0 0.91rem;
    display: flex;
    align-items: center;
  }
  .section_6 {
    padding: 0.44rem 0.41rem 0.44rem 0.59rem;
    background-color: #2691E6;
    box-shadow: 0px 0.13rem 0.41rem #2691E6, inset 0px 0.094rem 0.84rem #ffffff38;
    border-radius: 0.81rem;
    width: 5.41rem;
    margin-right: 20rpx;
  }
  .equal-division_2 {
    margin-top: 1.75rem;

  }
  .group_12 {
    padding: 0 0.78rem;
  }
  .equal-division_3 {
    margin-top: 0.97rem;
    padding: 0 0.42rem;
    display: flex;
    justify-content: space-around;
  }
  .group_17 {
    padding: 0.84rem 0 0.97rem;
  }
  .section_9 {
    margin: 0 0.16rem 0.5rem;
    padding: 0.94rem 0.75rem 1.16rem;
    background-color: #F3F9FE;
    border-radius: 0.47rem;
    
  }
  .image {
    filter: drop-shadow(0px 0.094rem 0.41rem #dd672352);
    width: 1.03rem;
    height: 1.25rem;
  }
  .text_1 {
    margin: 0.22rem 0 0.094rem 0.34rem;
    color: #ffffff;
    font-size: 1rem;
    font-family: SourceHanSansCN;
    font-weight: 500;
    line-height: 0.94rem;
  }
  .text_8 {
    margin-left: 0.47rem;
    color: #000;
    font-size: 1rem;
    font-family: SourceHanSansCN;
    font-weight:bold;
    line-height: 0.94rem;
  }
  .text_9 {
    color: #ffffff;
    font-size: 0.69rem;
    font-family: SourceHanSansCN;
    line-height: 0.66rem;
  }
  .image_10 {
    width: 0.75rem;
    height: 0.75rem;
  }
  .text_22 {
    margin-left: 0.47rem;
    color: #000;
    font-size: 1rem;
    font-family: SourceHanSansCN;
    font-weight: 500;
    line-height: 0.94rem;
  }
  .group_13 {
    margin-left: 0;
  }
  .text_27 {
    margin-left: 0.47rem;
    color: #000;
    font-size: 1rem;
    font-family: SourceHanSansCN;
    font-weight: 500;
    line-height: 0.97rem;
  }
  .group_20 {
    margin-top: 0.66rem;
    padding: 0 0.13rem;
  }
  .text_32 {
    margin-left: 2.59rem;
    margin-top: 0.41rem;
    align-self: flex-start;
    color: #a5a9c3;
    font-size: 0.69rem;
    font-family: SourceHanSansCN;
    line-height: 0.66rem;
  }
  .image_12 {
    filter: drop-shadow(0px 0.13rem 0.41rem #2c338659);
    width: 2.5rem;
    height: 2.5rem;
  }
  .text_23 {
    margin-top: 0.66rem;
    color: #333333;
    font-size: 0.75rem;
    font-family: SourceHanSansCN;
    line-height: 0.69rem;
  }
  .image_13 {
    margin-left: 0.25rem;
    align-self: flex-start;
    filter: drop-shadow(0px 0.13rem 0.41rem #a23e2f59);
    width: 2.5rem;
    height: 2.5rem;
  }
  .text_24 {
    margin-top: 0.63rem;
    align-self: flex-start;
    color: #333333;
    font-size: 0.75rem;
    font-family: SourceHanSansCN;
    line-height: 0.72rem;
  }
  .image_14 {
    filter: drop-shadow(0px 0.13rem 0.41rem #895f3759);
    width: 2.5rem;
    height: 2.5rem;
  }
  .text_25 {
    margin-top: 0.66rem;
    color: #333333;
    font-size: 0.75rem;
    font-family: SourceHanSansCN;
    line-height: 0.75rem;
  }
  .image_15 {
    filter: drop-shadow(0px 0.13rem 0.41rem #255e8f59);
    width: 2.5rem;
    height: 2.5rem;
  }
  .text_26 {
    margin-top: 0.63rem;
    color: #333333;
    font-size: 0.75rem;
    font-family: SourceHanSansCN;
    line-height: 0.72rem;
  }
  .text-wrapper {
    margin-right: 0.25rem;
    margin-top: 0.16rem;
    padding: 0.34rem 0 0.38rem;
    background-color: #E7F5FF;
    border-radius: 0.72rem;
    width: 4.06rem;
    height: 1.44rem;
    border: solid 0.031rem #2691E6;
  }
  .text-wrapper_1 {
    padding: 0.25rem 0 0.22rem;
    flex-shrink: 0;
    background-color: #2691E6;
    border-radius: 0.16rem;
    width: 2.06rem;
    height: 1.13rem;
  }
  .text-wrapper_2 {
    padding: 0.25rem 0 0.22rem;
    flex-shrink: 0;
    background-color: #f72bfe;
    border-radius: 0.16rem;
    width: 2.06rem;
    height: 1.13rem;
  }
  .text_31 {
      width: 60vw;
    margin: 0.16rem 0 0.13rem 0.44rem;
    color: #63667d;
    font-size: 0.88rem;
    font-family: SourceHanSansCN;
    line-height: 0.84rem;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .image_17 {
    flex-shrink: 0;
    width: 2.06rem;
    height: 2.06rem;
    border-radius: 100%;
  }
  .text_28 {
    margin-left: 0.34rem;
    align-self: center;
    color: #333333;
    font-size: 0.94rem;
    font-family: SourceHanSansCN;
    font-weight: 500;
    line-height: 0.69rem;
  }
  .text_29 {
    color: #2691E6;
    font-size: 0.69rem;
    font-family: SourceHanSansCN;
    line-height: 0.66rem;
  }
  .text_30 {
    color: #ffffff;
    font-size: 0.69rem;
    font-family: SourceHanSansCN;
    font-weight: 700;
    line-height: 0.66rem;
  }
  .banners{
      width: 690rpx;
      height: 300rpx;
      margin: 30rpx auto;
      image{
          width: 690rpx;
          height: 300rpx;
      }
  }
</style>
